<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>

  <body>
    <button id="btn">按钮</button>
    <script>
      /*
            this 是一个关键字
                在函数中指向一个对象


            先给函数分类
                1. 普通函数                     ----   window
                2. 构造函数                     ----   实例对象
                3. 回调函数                     ----   window
                4. 事件处理程序                 ----    事件源
                5. 对象的方法                   ----   实例对象
                6. 箭头函数                     ----   上级作用域的this
        */

      // 1.证明 普通函数的this   ---- window
      // function fn() {
      //   console.log(this);
      // }
      // fn()//window

      // 2.证明 构造函数的this  ----  实例对象
      // let temp = null
      // function Person() {
      //     console.log(this);
      //     temp = this
      // }
      // let p1 = new Person()
      // console.log(p1 === temp);//true

      // 3.证明回调函数的this   ---  大多数都是window
      // setTimeout(function () {
      //     console.log(this);
      // }, 100);

      // ([1, 2, 3]).forEach(function () {
      //     console.log(this);
      // })

      // 4.证明 事件处理程序的 this  --- 事件源
      // let btn = document.querySelector('#btn')
      // btn.onclick = function () {
      //     console.log(this);
      // }
      // btn.addEventListener('click', function () {
      //     console.log(this);//btn
      // })


      // 5.对象的方法的this   ---  实例对象
      // let obj = {
      //   sayHi: function () {
      //     console.log(this);
      //   }
      // }
      // obj.sayHi() //{sayHi:f}

      // Object.prototype.sayHi = function () {
      //   console.log(this);
      // }
      // let o1 = new Object()
      // o1.name = '狗蛋'
      // o1.sayHi() //{name:'狗蛋'}


      // 6.箭头函数的 this --- 上级作用域的this
      // function f1() {
      //     console.log(this);
      //     let f2 = () => {
      //         console.log(this);
      //     }
      //     f2()
      // }
      // f1()
    </script>
  </body>

</html>